<template>
  <div>
    <el-select clearable placeholder="请选择省份" v-model="province">
      <el-option v-for="item in areas" :key="item.code" :value="item.code" :label="item.name"></el-option>
    </el-select>
    <el-select clearable :disabled="!province" placeholder="请选择城市" v-model="city" style="margin: 0 10px;">
      <el-option v-for="item in selectCity" :key="item.code" :value="item.code" :label="item.name">
      </el-option>
    </el-select>
    <el-select clearable :disabled="!province || !city" placeholder="请选择区域" v-model="area">
      <el-option v-for="item in selectArea " :key="item.code" :value="item.code" :label="item.name"></el-option>
    </el-select>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import allArea from '../lib/pca-code.json'
export interface AreaItem {
  name: string,
  code: string,
  children?: AreaItem[]
}
export interface Data {
  name: string,
  code: string
}
let province = ref<string>('')
let city = ref<string>('')
let area = ref<string>('')
let areas = ref(allArea)

let selectCity = ref<AreaItem[]>([])
selectCity = computed(() => {
  if (!province.value) return []
  else {
    let citys = areas.value.find(item => item.code === province.value)?.children!
    return citys
  }
})
watch(() => province.value, val => {
  city.value = ''
  area.value = ''
})

let selectArea = ref<AreaItem[]>([])
selectArea = computed(() => {
  if (!city.value || !selectCity.value) {
    return []
  } else {
    let areas = selectCity.value.find(item => item.code === city.value)?.children!
    return areas
  }
})
watch(() => city.value, val => {
  area.value = ''
})
//分发事件给父组件
let emits = defineEmits(['change'])
watch(() => area.value, val => {
  if (val) {
    let provinceData: Data = {
      code: province.value,
      name: province.value && allArea.find(item => item.code === province.value)!.name
    }
    let cityData: Data = {
      code: city.value,
      name: city.value && selectCity.value.find(item => item.code === city.value)!.name
    }
    let areaData: Data = {
      code: val,
      name: val && selectArea.value.find(item => item.code === area.value)!.name
    }
    emits('change', {
      province: provinceData,
      city: cityData,
      area: areaData
    })
  }
})

</script>

<style scoped lang="scss"></style>